---
sidebar_position: 1
description: More information about DragSelect. DragSelect is a JavaScript library that allows you to select elements by dragging a rectangle over them and allows you to drag the selected elements around. It is a lightweight alternative to jQuery UI's selectable and draggable widgets.
---

import GitHubButton from "react-github-btn";

# DragSelect

<picture>
  <source
    media="(prefers-color-scheme: light)"
    srcset="https://dragselect.com/img/dragselect-logo.png"
  />
  <source
    media="(prefers-color-scheme: dark)"
    srcset="https://dragselect.com/img/dragselect-logo-alt.png"
  />
  <img
    alt="The DragSelect logo: a selection symbol, a hand, a drop symbol and a mouse within a selection square."
    width="300"
    src="https://dragselect.com/img/dragselect-logo.png"
  />
</picture>
<br />
<a href="https://github.com/ThibaultJanBeyer/DragSelect/actions">
  <img
    alt="Build Status"
    src="https://github.com/ThibaultJanBeyer/DragSelect/actions/workflows/github-actions-build.yml/badge.svg"
  />
</a> <a href="https://unpkg.com/dragselect@latest/dist/ds.min.js">
  <img
    alt="gzip size"
    src="https://img.badgesize.io/https://dragselect.com/ds.min.js?compression=gzip"
  />
</a> <a href="https://www.npmjs.com/package/dragselect">
  <img
    alt="npm downloads count"
    src="https://img.shields.io/npm/dt/dragselect.svg"
  />
</a> <a href="https://github.com/ThibaultJanBeyer/DragSelect/blob/master/DragSelect/package.json">
  <img
    alt="No Dependency"
    src="https://img.shields.io/badge/dependencies-none-informational"
  />
</a> <a href="https://github.com/ThibaultJanBeyer/DragSelect/blob/master/CONTRIBUTING.md">
  <img
    alt="Contributors Welcome"
    src="https://img.shields.io/badge/contributors-welcome-blueviolet"
  />
</a> <a href="https://github.com/sponsors/ThibaultJanBeyer">
  <img
    alt="Sponsors Welcome"
    src="https://img.shields.io/badge/sponsors-welcome-blueviolet"
  />
</a>

## Key-Features

- **No dependencies** [![No Dependency](https://img.shields.io/badge/dependencies-none-informational)](https://github.com/ThibaultJanBeyer/DragSelect/blob/master/package.json)
- Hyper customizable
- Replicates operating system drag-selection in the browser
- Accessibility (a11y)
- Use modifier keys to make multiple independent selections
- Select, Drag and Drop also also via keyboard
- Supports all major browsers
- Lightweight, only ![gzip size](https://img.badgesize.io/https://dragselect.com/ds.min.js?compression=gzip)
- Popular: ![npm downloads count](https://img.shields.io/npm/dt/dragselect.svg) on npm
- DragSelect was written with Performance in mind (can easily select >15.000 Elements)
- Supports SVG
- Supports mobile (touch interaction)
- Free & open source
- Easy to use

![demo-gif](/img/dragselect.gif)

## Why?

Because apparently there was nothing that does not require jquery out there.  
This is better than https://jqueryui.com/selectable/ or https://jqueryui.com/draggable/ and has no dependencies.
We use it currently in a professional rich interface application where we have a file management system. The user can select files to organize them and change their metadata, with this plugin our users are able to select multiple files and perform batch/bulk-operations (applying changes to multiple files at once). We also use it in production for another huge, graphical cloud hosting manager with millions of active users. Users can select multiple servers, storages, etc. on an artboard to perform multi-operations, re-organize them, move them on the UI or batch-delete. We’re running it in production since January 18' it’s super helpful and very stable, let’s keep it that way. I can easily think of dozens other use-cases. We’re really keen to know how you use it in your projects, please let us know.

## Supporters

<GitHubButton
  href="https://github.com/sponsors/ThibaultJanBeyer"
  data-icon="octicon-heart"
  aria-label="Sponsor @ThibaultJanBeyer on GitHub"
>
  Donate
</GitHubButton> <GitHubButton
  href="https://github.com/ThibaultJanBeyer/DragSelect"
  data-icon="octicon-star"
  data-show-count="true"
  aria-label="Star ThibaultJanBeyer/DragSelect on GitHub"
>
  Star
</GitHubButton>

Please donate to support the countless hours of hard work & support. Especially if your company makes money, then there is no excuse.
If you're broke, you can still support us with your time instead by [contributing to the code](https://github.com/ThibaultJanBeyer/DragSelect/blob/master/CONTRIBUTING.md)!

Thank you :)

### Thanks to:

#### LambdaTest

<a href="https://www.lambdatest.com/">
  <img
    src="https://www.lambdatest.com/support/img/logo.svg"
    alt="LambdaTest"
    width="147"
    style={{ filter: "brightness(0) invert(1)" }}
  />
</a>

[LambdaTest](https://www.lambdatest.com/) is a Next-Generation Mobile App and Cross Browser Testing Cloud. They support this open source projects by providing us with a free account and with a generous donation!

#### BrowserStack

<a href="https://www.browserstack.com/">
  <img
    src="https://cdn.worldvectorlogo.com/logos/browserstack.svg"
    alt="Browserstack"
    width="100px"
  />
</a>

[BrowserStack](https://www.browserstack.com/) is a service for cross-browser testing. They support this open source projects by providing us with a [free account](https://www.browserstack.com/open-source)!

#### DigitalOcean

<a href="https://www.digitalocean.com/">
  <img
    src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/SVG/DO_Logo_vertical_blue.svg"
    alt="DigitalOcean"
    width="150px"
  />
</a>

[DigitalOcean](https://www.digitalocean.com/) is a cloud hosting service. They support this open source projects by providing us with [free credits](https://www.digitalocean.com/open-source/credits-for-projects)!

#### You?

[You?](https://github.com/sponsors/ThibaultJanBeyer)

Show your appreciation and support with a donation! [Direct Donation to DragSelect](https://www.blockchain.com/btc/address/1LdweSpjgSeJC8XxX3swrohBMBLUzg6cmC) (via Bitcoin: `1LdweSpjgSeJC8XxX3swrohBMBLUzg6cmC`). Or sponsor via [GitHub Sponsors](https://github.com/sponsors/ThibaultJanBeyer) or [Get in touch](mailto:thibault.beyer@gmail.com).

Donations are distributed with all project contributors proportionally to their involvement. We are grateful for any amount: we have more than ![npm downloads count](https://img.shields.io/npm/dt/dragselect.svg), imagine how much we'd have if everyone would have had donated only 1$ 🤩 (unfortunately this is just a dream). If you donate, we can display your logo here if you want, which will give you infinite fame, fortune and help you recruit great talent.

### Licenses

TL;DR: If your project makes money: <a href="/licenses">Purchase a commercial license</a>.

DragSelect is, and will forever be, a free and open-source tool. <strong>Free for any non-commercial project</strong>. However, this is a lot of work and hard work should be rewarded, so if you are using DragSelect for business and/or commercial sites, projects, and applications you’ll have to <a href="/licenses">get the commercial license</a> to keep your source proprietary and the project alive.
